<template>
  <!-- 3.使用School标签 -->
  <div>
    <!-- 子组件给父组件(app组件)传递数据  name -->
    <!-- 方法一  通过给子组件先传递一个方法  子组件通过props接收-->
    <h2>学生姓名:{{ studentName }}</h2>
    <School :sendSchoolName="getSchoolName" />
    <!-- 方法二  通过自定义事件 给Student组件实例对象绑定一个atguigu事件(第一种写法)  使用$emit触发自定义事件-->
    <!-- <Student @atguigu="sendSchoolName" /> -->
    <!-- 自定义事件第二种写法 使用ref和mounted(灵活性强)-->
    <!-- 如果要给组件绑定原生事件需要加.native -->
    <Student ref="student" @click.native="demo" />
  </div>
</template>

<script>
//1router.Student
import Student from './components/Student';
import School from './components/School';

export default {
  name: 'App',
  //2.Student
  components: { School, Student },
  data() {
    return {
      studentName: '',
    };
  },
  methods: {
    getSchoolName(name) {
      console.log('收到了学校名称', name);
    },
    getStudentName(name) {
      console.log('收到了学生名称', name);
      this.studentName = name;
    },
    demo() {
      alert('demo函数被调用了');
    },
  },
  mounted() {
    // 挂在完3秒之后再给Student组件的实例对象绑定一个atguigu事件
    // setTimeout(() => {
    //   this.$refs.student.$on('atguigu', this.getStudentName);
    // }, 3000);
    this.$refs.student.$on('atguigu', this.getStudentName);
    // this.$refs.student.$on('atguigu', name => {
    //   console.log('收到了学生名称', name);
    //   this.studentName = name;
    // });
  },
};
</script>
